<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <title>hideShowPassword Demo</title>
  <style>

  /*
   * Add this if you want to disable IE10's implementation
   * of the winking eye in favor of your own.
   * Alternatively, you could set the 'innerToggle' option to
   * false for that browser only.
   */
  ::-ms-reveal {
    display:none !important;
  }

  /*
   * This toggle style shows a winking "eye-con" (nyuk, nyuk).
   * Open eye means "show," closed eye means "hide."
   */
  .hideShowPassword-toggle { background-image: url(img/yy.gif); background-position: 0 center; background-repeat: no-repeat; cursor: pointer; height: 100%; overflow: hidden; text-indent: -9999em; width: 44px;  }
  .hideShowPassword-toggle-hide {
    background-position: -44px center;
  }

  /* Simple text toggle style */
  .my-toggle-class {
    color: #888;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: bold;
    padding: 0.5em 1em;
    text-transform: uppercase;
  }

  /*
   * Because our input elements have a z-index so that
   * their borders will overlap on focus, we'll give ours
   * a higher one to make sure they're always visible.
   */
  .hideShowPassword-toggle,
  .my-toggle-class {
    z-index: 3;
  }

  /* Some boilerplate styles */

  html {
    background-color: #f6f6f6;
  }

  body {
    color: #444;
    font-family: sans-serif;
    line-height: 1.4em;
    margin: 1em auto 2em;
    padding: 0 1em;
    max-width: 30em;
  }

  h1, p, figcaption {
    text-align: center;
  }

  h1 {
    font-size: 1.25em;
    line-height: 1em;
    margin: 1.5em 0 1em;
    padding: 0;
  }

  figure {
    margin: 0 0 1em;
  }

  figcaption {
    color: #999;
    font-size: 0.875em;
    margin-top: 0.5em;
  }

  .btn {
    background-color: #0088cc;
    border-radius: 0.25em;
    color: #fff;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
  }

  /*
   * Styles for the login forms.
   * None of this is plugin-dependent.
   */

  .login, .login-field {
    border-radius: 0.25em;
  }

  .login {
    background-color: #e6e6e6;
  }

  .login-field {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 0.25em;
    color: inherit;
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0.5em;
    position: relative;
    vertical-align: middle;
    width: 100%;

    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .login-field:focus {
    border-color: #0088cc;
    outline: transparent;
    z-index: 2;
  }

  .login-field-username {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -2px;
  }

  .login-field-password {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -2px;
  }

  .login-option {
    padding: 0.25em 0.5em 0.5em;
  }

  .login-option input {
    vertical-align: baseline;
  }

  </style>
  <!-- Including Modernizr to test for touch support. -->
  <script src="vendor/modernizr.custom.js"></script>
</head>
<body>

<h1>hideShowPassword Demo</h1>

<figure>
  <div class="login">
    <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">
    <input class="login-field login-field-password" id="password-1" type="password" placeholder="Password">
  </div>
  <figcaption>Inner toggle styled as icon.</figcaption>
</figure>

<figure>
  <div class="login">
    <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">
    <input class="login-field login-field-password" id="password-2" type="password" placeholder="Password">
  </div>
  <figcaption>Password visible by default, toggle styled as text and shows on focus.</figcaption>
</figure>

<figure>
  <div class="login">
    <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">
    <input class="login-field login-field-password" id="password-3" type="password" placeholder="Password" value="example password">
    <div class="login-option"><input type="checkbox" id="show-password"> <label for="show-password">Show password</label></div>
  </div>
  <figcaption>Checkbox toggles password visibility.</figcaption>
</figure>



<!--

Include Zepto by default or jQuery as a fallback.
See: http://zeptojs.com/#download

The Zepto build here is custom because we need the
data module to be included.

See the README for more info on when to use
Zepto versus jQuery.

-->
<script>
document.write('<script src=vendor/' +
('__proto__' in {} ? 'zepto.custom' : 'jquery') +
'.js><\/script>')
</script>

<!-- Include the plugin. Yay! -->
<script src="hideShowPassword.min.js"></script>

<script>

// Example 1
$('#password-1').hideShowPassword({
  // Creates a wrapper and toggle element with minimal styles.
  innerToggle: true,
  // Makes the toggle functional in touch browsers without
  // the element losing focus.
  touchSupport: Modernizr.touch
});

// Example 2
$('#password-2').hideShowPassword({
  // Make the password visible right away.
  show: true,
  // Create the toggle goodness.
  innerToggle: true,
  // Give the toggle a custom class so we can style it
  // separately from the previous example.
  toggleClass: 'my-toggle-class',
  // Don't show the toggle until the input triggers
  // the 'focus' event.
  hideToggleUntil: 'focus',
  // Enable touch support for toggle.
  touchSupport: Modernizr.touch
});

// Example 3
$('#show-password').on('change', function () {
  // When the '#show-password' checkbox changes its value,
  // set the visibility of the password field to whatever
  // its 'checked' attribute is.
  $('#password-3').hideShowPassword($(this).prop('checked'));
});

</script>
<script src="http://www.jq22.com/js/jq.js"></script>

</body>
</html>